<template>
  <q-btn color="grey-9" flat class="size-16" @click="opened = true">
    <q-icon name="add"/>新建
    <q-dialog v-if="opened" v-model="opened">
      <div class="bg-white" style="min-width: 60vw;min-height: 60vh">
        <q-tabs align="justify" v-model="type" color="white" class="border-bottom-1" text-color="black">
          <q-tab class="q-px-md" name="blank" label="空白地图"/>
          <q-tab class="q-px-md" name="template" label="地图模版"/>
        </q-tabs>
        <div v-if="type=== 'blank'" class="q-my-md">
          <div class="q-my-md row justify-center q-gutter-x-sm" style="margin-top: 8vh">
            <q-input dense placeholder="输入地图名称" autofocus outlined class="col-xl-4 col-lg-5 col-md-6" v-model="name">
            </q-input><q-btn  color="primary" label="新建" @click="createMap"></q-btn>
          </div>
        </div>
        <div v-if="type=== 'template'" class="q-my-md">
          <div class="row">
            <template v-for="(template, index) in templates">
              <div class="col-4 relative-position q-mb-md" :key="index" v-if="!template.admin || admins.includes(auth.id)">
                <div style="position: absolute;top:0;bottom:0;left:0;right:0" class="flex flex-center">
                  <q-btn color="white" class="shadow-1" text-color="dark" round icon="add" style="margin-bottom: 30px" @click="createMap(template)"/>
                </div>
                <div class="q-ma-sm bg-img-center border-radius-5"
                     :style="{'background-image': 'url(/statics/template/' + template.key + '.jpg)'}"
                     style="padding-bottom: 56%;height: 0;">
                </div>
                <div class="q-px-sm bold size-18 row items-center">
                  <div class="col">{{ template.name }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </q-dialog>
  </q-btn>
</template>

<script>
import { templates } from '../../config/templates'

  export default {
    name: 'layoutHeaderCreate',
    data () {
      return {
        opened: false,
        type: 'blank',
        name: '',
        templates: templates,
        admins: [
          1, 575, 2261, 1068, 1191, 5060, 8934
        ]
      }
    },
    created () {
      this.$root.$on('openCreateModal', () => { this.opened = true })
    },
    computed: {
    },
    watch: {
    },
    methods: {
      async createMap (template) {
        const postData = { name: this.name }

        if (template) {
          if (template.data) {
            postData.map_obj = template.data
          }
          if (template.projection) {
            postData.projection = template.projection
          }
        }

        const { status, data } = await this.postRequest({
          api: '/api/map/',
          data: postData
        })

        if (status === 201) {
          this.notify('success', '创建地图成功')
          const id = data.id
          window.location.href = `https://www.ageeye.cn/map/edit/${id}/`
        }
      }
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
  .create-modal
    .map-name
      padding 6px !important
      /*margin-top 8vh!important*/

</style>
